import { memo } from "react";
import { useSelector } from "react-redux";

import { PictureWrapper } from "./style";

export const Picture = memo(
    (props) => {
          const {roomInfo} = useSelector((state) => {
        return {
                  roomInfo: state.detail.roomInfo
              }
          })
        
        const { showClick } = props;

        return (
            <PictureWrapper>
              <div className="left-picture">
                    <div className="item" onClick={()=>{showClick()}}>
                        <img src={roomInfo?.picture_urls?.[0]} alt=""/> 
                        <div className="cover" ></div>
                  </div>
              </div>
                <div className="right-picture">
                    {roomInfo?.picture_urls?.slice(1,5).map((item) => {
                        return (
                            <div className="item" onClick={() => { showClick() }}>
                                     <img src={item} alt="" key={item} />
                                     <div className="cover"></div>
                            </div>
                        )
                    })}
                </div>
             
            </PictureWrapper>
        )
    }
)